<template>
  <div class="my-bigbox">
    <div class="mymessage">
      <div class="mybox">
        <div class="myHead">
          <img :src="myList.userImg" alt="" />
        </div>

        <div class="myName">
          {{ myList.userName }}
          <img
            @click="updateName"
            src="../../assets/img/my/update.svg"
            alt=""
          />
        </div>

        <div class="signOut" @click="zhuxiao">退出登录</div>

        <div class="updateImg" @click="updateImg">
          <div>修改头像</div>
        </div>

        <div class="mylove" :class="{ myActive: love == true }">
          <div>
            <img v-if="love" src="../../assets/img/my/shouc2.svg" alt="" />
            <img v-else src="../../assets/img/my/shouc1svg.svg" alt="" />
          </div>
          <div>喜欢</div>
        </div>

        <div class="mylove" @click="goHistory">
          <div>
            <img v-if="history" src="../../assets/img/my/history2.svg" alt="" />
            <img v-else src="../../assets/img/my/history1.svg" alt="" />
          </div>
          <div>历史</div>
        </div>
      </div>

      <div class="my-right" :class="{ myheights: size < 2 }">
        <div class="mytop">我的喜欢</div>

        <div class="nolover" v-if="!myLove">
          <div>
            <img src="../../assets/img/my/meiyoulove.svg" alt="" />
          </div>
        </div>

        <div class="loveList" v-else>
          <div class="loveItemNoe">
            <div class="loveone-img">
              <img @click="goFood(0)" :src="myLoveList[0].fimg" />
            </div>

            <div class="lovenoe">
              <div class="lovenoe-name" @click="goFood(0)">
                {{ myLoveList[0].fname }}
              </div>
              <div @click="goFood(0)">
                {{ myLoveList[0].fcontent }}
              </div>
              <div>添加于 : {{ myLoveList[0].efTime }}</div>
            </div>
          </div>

          <div class="love_bottom">
            <div class="love-item" v-for="(item, index) in size" :key="index">
              <div class="bottom-imgl">
                <img
                  @click="goFood(index + 1)"
                  :src="myLoveList[index + 1].fimg"
                />
              </div>

              <div class="bottom-namel">
                <div class="bottom-n" @click="goFood(index)">
                  {{ myLoveList[index + 1].fname }}
                </div>
                <div class="bottom-j" @click="goFood(index)">
                  {{ myLoveList[index + 1].fcontent }}
                </div>
                <div class="bottom-t" @click="goFood(index)">
                  添加于 : {{ myLoveList[index + 1].efTime }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="updateOut">
      <update-img></update-img>
    </div>

    <div v-if="updateNames">
      <update-name v-on:childByOut="childByOut"></update-name>
    </div>
  </div>
</template>

<script>
import UpdateImg from "../updateimg/UpdateImg.vue";
import { request } from "../../network/request";
import UpdateName from "../updateimg/UpdateName.vue";
export default {
  components: { UpdateImg, UpdateName },
  name: "MyMessage",
  data() {
    return {
      love: true,
      history: false,
      myLove: true,
      myLoveList: "",
      updateOut: "",
      updateNames: "",
      myList: "",
      picked: "",
      size: "",
    };
  },
  created() {
    request({
      url: "/user/queryUserInfo",
      method: "post",
      params: {
        userId: sessionStorage.getItem("userid"),
      },
    })
      .then((res) => {
        this.myList = res.data.data;
        console.log(res.data.data);
      })
      .catch((err) => {
        console.log(err);
      });

    request({
      url: "/enjoyfoot/queryFavoriteFoot",
      params: {
        userId: sessionStorage.getItem("userid"),
      },
    })
      .then((res) => {
        this.myLoveList = res.data.data;
        if (res.data.data.length == 0) {
          this.myLove = false;
          this.size = 0;
        } else {
          this.myLove = true;
          this.size = res.data.data.length - 1;
        }
        console.log(res.data.data);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    updateImg() {
      this.updateOut = true;
    },
    childByOut: function (childValue) {
      this.updateNames = childValue;
    },
    zhuxiao() {
      sessionStorage.setItem("userid", null);
      this.$router.push("/homepage");
      location.reload();
    },
    updateName() {
      this.updateNames = true;
    },
    goHistory() {
      this.$router.push("/myhistory");
    },
    goFood(index) {
      this.$router.push({
        path: "/showfood",
        query: {
          fid: this.myLoveList[index].fid,
        },
      });
    },
  },
};
</script>

<style>
.my-bigbox {
  width: 100%;
  background-color: rgb(248, 248, 250);
}

.mymessage {
  width: 80%;
  margin: 0 auto;
  display: flex;
  padding-top: 1.1rem;
}

.mybox {
  width: 1.6rem;
  border-radius: 0.18rem;
  background-color: rgb(255, 255, 255);
  text-align: center;
  position: fixed;
  padding-bottom: 0.35rem;
}

.updateImg {
  margin: 0 auto;
  display: flex;
  width: 1.2rem;
  height: 0.25rem;
  font-size: 0.1rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.06rem;
  margin-bottom: 0.35rem;
  background-color: rgb(68, 168, 235);
  color: rgb(255, 255, 255);
  cursor: pointer;
}
.myHead {
  font-size: 0.1rem;
  width: 100%;
  margin-top: 0.2rem;
  margin-bottom: 0.1rem;
}

.myHead img {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

.myName {
  font-size: 0.12rem;
  margin-bottom: 0.05rem;
}

.myName img {
  width: 0.1rem;
  height: 0.1rem;
  margin-right: -0.15rem;
  cursor: pointer;
}

.signOut {
  margin-top: 0.12rem;
  font-size: 0.08rem;
  margin-bottom: 0.25rem;
  cursor: pointer;
}

.mylove {
  margin: 0 auto;
  display: flex;
  width: 1.2rem;
  height: 0.25rem;
  font-size: 0.1rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
  border-radius: 0.06rem;
}

.mylove:hover {
  background-color: rgb(230, 247, 255);
  cursor: pointer;
}

.myActive {
  background-color: rgb(230, 247, 255);
  color: rgb(64, 170, 212);
}

.lovenoe-name {
  color: #000;
  cursor: pointer;
}

.lovenoe-name:hover {
  color: rgb(84, 179, 223);
}

.mylove img {
  width: 0.13rem;
  height: 0.13rem;
  margin-right: 0.1rem;
  margin-top: 0.05rem;
}

.my-right {
  width: 6rem;
  background-color: rgb(255, 255, 255);
  margin-left: 2rem;
  border-radius: 0.2rem;
  padding-bottom: 0.3rem;
}

.myheights {
  padding-bottom: 2rem;
}

.mytop {
  justify-content: space-between;
  display: flex;
  font-size: 0.1rem;
  margin: 0.3rem 0 0 0.3rem;
}

.deleteAll {
  cursor: pointer;
  display: flex;
  width: 1.6rem;
  justify-content: center;
}

.deleteAll div:hover {
  color: rgb(151, 174, 235);
}

.dele-piliang {
  margin-right: 0.18rem;
}

.nolover {
  margin: 0 auto;
  margin-top: 0.8rem;
  width: 2rem;
  height: 2.5rem;
  text-align: center;
}

.nolover img {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0 auto;
}
.nolover-message {
  font-size: 0.16rem;
}
.loveList {
  margin-top: 0.05rem;
}

.loveItemNoe {
  display: flex;
  margin: 0.28rem 0 0 0.1rem;
  flex-wrap: wrap;
}

.loveone-img {
  margin-left: 0.2rem;
  cursor: pointer;
}

.loveone-img img {
  width: 1.7rem;
  height: 1.3rem;
  border-radius: 0.08rem;
}

.lovenoe {
  font-size: 0.1rem;
  margin-left: 0.3rem;
  margin-top: 0.15rem;
}

.lovenoe :nth-child(1) {
  font-size: 0.125rem;
}

.lovenoe :nth-child(1) a {
  text-decoration: none;
}

.lovenoe :nth-child(2) {
  width: 2.1rem;
  font-size: 0.1rem;
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: rgb(189, 183, 185);
}

.lovenoe :nth-child(3) {
  width: 2.1rem;
  font-size: 0.08rem;
  margin-top: 0.25rem;
  margin-bottom: 0.15rem;
  color: rgb(189, 183, 185);
}

.love_bottom {
  display: flex;
  margin: 0 auto;
  width: 95%;
  flex-wrap: wrap;
  border-top: 1px solid rgb(204, 200, 197);
  padding-top: 0.15rem;
}

.love-item {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.15rem;
  margin-left: 0.25rem;
}

.bottom-imgl {
  font-size: 0.1rem;
  width: 1.2rem;
  height: 0.8rem;
  border-radius: 0.07rem;
  overflow: hidden;
  cursor: pointer;
}

.bottom-imgl img {
  width: 100%;
  height: 100%;
  border-radius: 0.06rem;
  transition: all 0.5s;
}

.bottom-imgl img:hover {
  transform: scale(1.2);
}

.bottom-n {
  font-size: 0.105rem;
  margin-top: 0.05rem;
  margin-left: 0.1rem;
  cursor: pointer;
}
.bottom-j {
  width: 1.1rem;
  font-size: 0.085rem;
  margin-top: 0.15rem;
  margin-left: 0.1rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  cursor: pointer;
}
.bottom-t {
  font-size: 0.08rem;
  margin-top: 0.12rem;
  margin-left: 0.1rem;
  cursor: pointer;
}

.bottom-n:hover,
.bottom-j:hover,
.bottom-t:hover {
  color: rgb(151, 174, 235);
}

.bottom-yc {
  position: relative;
  width: 2.2rem;
  height: 1.5rem;
  border-radius: 0.1rem;
  background-color: rgba(0, 0, 0, 0.4);
  margin-top: -2rem;
  margin-bottom: 0.5rem;
  display: none;
}

.bottom-yc a {
  text-decoration: none;
  color: rgb(247, 244, 244);
  font-size: 0.14rem;
}

.bottom-yc a :nth-child(1) {
  padding-top: 0.2rem;
  padding-left: 0.2rem;
}

.bottom-yc a :nth-child(2) {
  padding-top: 0.3rem;
  padding-left: 0.2rem;
  padding-bottom: 0.5rem;
}

.history-item {
  display: flex;
  margin-top: 0.1rem;
  align-items: center;
  font-size: 0.1rem;
  justify-content: space-around;
  flex-wrap: wrap;
}

.history-name {
  width: 2.3rem;
  font-size: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: -0.7rem;
  cursor: pointer;
}

.history-bottom {
  margin-top: 0.25rem;
}

.history-name:hover {
  color: rgb(158, 198, 235);
}

.history-tiem {
  font-size: 0.1rem;
}

.history-del {
  font-size: 0.15rem;
  cursor: pointer;
}
.history-del:hover {
  color: rgb(158, 198, 235);
}
</style>